import "./app.scss";
import React from "react";
import { add } from "./utils/util";
import Dialog from "./components/Dialog.jsx";
// import $ from "jquery";
import { get } from "lodash";

const App = () => {
  let name = "react!123123";
  console.log(add(1, 7));
  const loadFooter = () => {
    import("./components/Footer.jsx").then((fn) => fn.default());
  };
  const getUserList = async () => {
    const res = await (await fetch("/api/user/list")).json();
    console.log(res, "用户列表");
  };
  const getUserInfo = async () => {
    const res = await (await fetch("/user")).json();
    console.log("用户信息", res);
  };

  const handleLogin = async () => {
    const res = await (
      await fetch("/login/account", {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          username: "admin",
          password: "888888",
        }),
      })
    ).json();
    console.log("登录信息：", res);
  };

  // const acquireDom = () => {
  //   console.log($("root"));
  // };
  return (
    <section className="app_coantainer">
      <Header />
      <h1 className="title">this is a webpack {name} project</h1>
      <div className="colorContent"></div>
      <div>
        <ul>
          <li>
            <button onClick={loadFooter}>加载footer</button>
          </li>
          <li>
            <button onClick={getUserList}>加载用户列表</button>
          </li>
          <li>
            <button onClick={getUserInfo}>获取用户信息</button>
          </li>
          <li>
            <button onClick={handleLogin}>用户登录</button>
          </li>
          <li>
            {/* <button onClick={acquireDom}>利用jQuery获取Dom</button> */}
          </li>
        </ul>
      </div>
      <Dialog />
    </section>
  );
};

class Header extends React.Component {
  render() {
    const obj = { a: { b: "react" } };
    console.log(get(obj, "a.b.c"));

    return <header>这是一个标题</header>;
  }
}

export default App;
